<template>
  <div class="img1">
    <div>
      <el-form ref="registerForm" :model="forms" :rules="rules" label-width="80px" class="login-box">
<!--        <el-form ref="loginform" label-width="80px" :model="loginform" class="login-box" :rules="LoginFormRules">-->
        <h3 class="login-title">注册</h3>
        <div class="move">
        <el-form-item prop="text">
          <el-input type="account" placeholder="请输入邮箱" v-model="forms.account"/>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" show-password placeholder="请输入密码" v-model="forms.password"/>
        </el-form-item>
        <el-form-item prop="password1">
           <el-input type="password1" show-password placeholder="请确认密码" v-model="forms.password1"/>
        </el-form-item >
          <el-form-item prop="text">
            <el-input type="ucard"  placeholder="请输入18位身份证号码" v-model="forms.ucard"/>
          </el-form-item>
<!--          三级地址-->
          <el-form-item>
            <el-cascader :options="options" v-model="selectedOptions" @change="handleChange" style="width: 340px"></el-cascader>
          </el-form-item>
          <el-form-item prop="code">
            <el-input type="code" placeholder="验证码" v-model="forms.code"/>
        </el-form-item>
          <!-- 随机验证码 -->
          <el-form-item>
            <div class="identifybox">
              <div @click="refreshCode">
                <s-identify :identifyCode="identifyCode"></s-identify>
              </div>
              <!-- 刷新验证码 -->
              <el-button @click="refreshCode" type='text' class="textbtn">看不清，换一张</el-button>
            </div>
          </el-form-item>
        <el-form-item>
          <el-button  @click="registerDemo">注  册</el-button>
          <el-button  @click="fanhui">返 回</el-button>
        </el-form-item>
            <h5>完成此注册，即表明您同意了我们的</h5>
<!--            <使用条款和隐私策略>-->
          <el-form-item>
            <router-link to="Login">已有帐号登录</router-link>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
// 引包
import SIdentify from './RandomCode.vue'
import { regionData, CodeToText } from 'element-china-area-data'
export default {
  components: {
    // 注册绘制随机验证码的组件
    SIdentify
  },
  mounted () {
    // 验证码初始化
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  },
  data () {
    // 自定义验证规则：验证码验证规则
    const validateVerifycode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入验证码'))
      } else if (value !== this.identifyCode) {
        console.log('validateVerifycode:', value)
        callback(new Error('验证码不正确'))
      } else {
        callback()
      }
    }
    return {
      identifyCodes: '1234567890',
      identifyCode: '',
      dialogVisible: false,
      options: regionData,
      selectedOptions: [],
      forms: {
        account: '', // 用户名
        password: '', // 密码
        password1: '', // 确认密码
        ucard: '',
        code: '' // 验证码
      },
      rules: {
        account: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 6, max: 12, message: '用户名由6-12位的英文字母数字下划线组成', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/, message: '密码必须同时包含数字与字母,且长度为 6-16位'}
        ],
        password1: [
          {required: true, message: '请输入确认密码', trigger: 'blur'},
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入确认密码'))
              } else if (value !== this.forms.password) {
                callback(new Error('两次输入密码不一致'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }],
        ucard: [
          {required: true, message: '请输入身份证', trigger: 'blur'}],
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur', validator: validateVerifycode},
          {min: 4, max: 4, message: '验证码要为四位数', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    handleChange (val) {
      // 将区域码转换成汉字
      this.forms.site = CodeToText[val[0]] + CodeToText[val[1]] + CodeToText[val[2]]
    },
    registerDemo () {
      if (this.forms.account !== '' && this.forms.password !== '') {
        if (this.forms.password === this.forms.password1) {
          if (this.forms.ucard !== '') {
            if (this.selectedOptions.length >= 1) {
              if (this.forms.code === this.identifyCode) {
                this.$axios.post('getRegister', this.forms).then(response => {
                  console.log(response.data)
                  if (response.data.code === 1) {
                    this.$message.success('注册成功')
                    this.$router.push({
                      path: '/Login'
                    })
                  } else {
                    this.$message.error('注册失败')
                  }
                }).catch(error => {
                  console.log(error)
                })
              } else {
                this.$message.error('验证码不正确！')
              }
            } else {
              this.$message.error('地址栏不能为空！')
            }
          } else {
            this.$message.error('身份证不能为空！')
          }
        } else {
          this.$message.error('两次密码不一致！')
        }
      } else {
        this.$message.error('账号或密码为空！')
      }
    },
    // 生成随机数
    randomNum (min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    // 切换验证码
    refreshCode () {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    // 生成四位随机验证码
    makeCode (o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
      }
      console.log(this.identifyCode)
    },
    fanhui () {
      this.$router.push({
        path: '/Login'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .login-box{
    border:1px solid #DCDFE6;
    width: 350px;
    margin: 10px auto;
    padding: 20px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title{
    text-align: center;
    margin: 0 auto 20px auto;
    color: #303133;
  }

  .img1{
    background-size: 100% 100%;
    background: url('../../static/lmg/2.jpg') center center repeat;
    height: 100%;
    position: fixed;
    width: 100%
  }
  .move{
    margin-left: -70px;
  }

  .identifybox {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
  }

</style>
